<template>
    <div class="body">
        <TitleTips title="基本信息" />
        <el-form class="size-auto width-100" :inline="true" size="medium" label-width="100px">
            <el-row :gutter="24">
                <el-col :span="24">
                    <el-form-item label="项目名称：">
                        <span>{{ info.name || '--' }}</span>
                    </el-form-item>
                </el-col>
                <el-col v-for="item in baseAttr" :key="item.key" :xl="6" :lg="8">
                    <el-form-item :label="item.label + '：'">
                        <span>{{ info[item.key] || '--' }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="工程概况：">
                        <span>{{ info.remark || '--' }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <TitleTips title="附件资料" />
        <FileListPreview style="margin-left: 20px;" :files="info.filesUrl" />
    </div>
</template>

<script>
import FileListPreview from '@/components/FileListPreview'

export default {
    name: 'ContractInfo',
    components: {
        FileListPreview,
    },
    props: {
        info: {
            type: Object,
            default: () => { return {} }
        }
    },
    data() {
        return {
            baseAttr: [
                { key: 'typeName', label: '类型', },
                { key: 'highway', label: '所属公路', },
                { key: 'constructAddress', label: '建设地点', },
                { key: 'budgetAmount', label: '工程预算', },
                { key: 'contractorName', label: '施工单位', },
                { key: 'supervisorName', label: '监理单位', },
                { key: 'date', label: '计划工期', }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.el-form--inline.size-auto.width-100 {
    ::v-deep {
        // form的label-width：72px 根据实际label宽度修改
        .el-form-item__content {
            width: calc(100% - 130px);
        }
    }    
}
.body {
    margin-top: 8px !important;
}

</style>
